<template>
  <div class="login-container">
    <div class="login-card">
      <h2 class="title">用户登录</h2>
      <van-cell-group inset>
        <van-field 
          label="账号" 
          label-class="input-label"
          placeholder="请输入账号" 
          v-model="loginForm.name"
          :border="false"
        />
        <van-field 
          label="密码" 
          label-class="input-label"
          placeholder="请输入密码" 
          type="password" 
          v-model="loginForm.password"
          :border="false"
        />
        <van-button 
          @click="onClickLogin" 
          type="primary" 
          size="large" 
          class="login-btn"
        >
          登录
        </van-button>
      </van-cell-group>
      <div class="goto">
        <van-button 
          @click="onRegister" 
          text="若还没有账号？点击前往注册" 
          class="register-btn"
        />
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);

  .login-card {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  }

  .title {
    text-align: center;
    font-size: 24px;
    color: #2c3e50;
    margin-bottom: 30px;
  }

  .van-cell-group {
    background: transparent;
    
    .van-field {
      margin-bottom: 20px;
      background: #f8f9fa;
      border-radius: 8px;
      
      &::after {
        display: none;
      }
    }
  }

  .login-btn {
    margin-top: 25px;
    border-radius: 30px;
    background: linear-gradient(45deg, #6366f1, #8b5cf6);
    font-weight: bold;
    transition: all 0.3s;
    
    &:active {
      transform: scale(0.98);
    }
  }

  .goto {
    margin-top: 25px;
    text-align: center;
    
    .register-btn {
      color: #6366f1;
      font-size: 14px;
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>

<script>
	import { showToast } from 'vant';
	import { loginAPI } from "@/api/user.js";
	import { useUserStore } from '@/stores/user.js';
	const userStore = useUserStore();

	//import { getUserLocal, setUserLocal, setTokenLocal } from "@/utils/auth.js";
	export default {
		data() {
			return {
				loginForm: {
					name: "dingding", //设置默认值，仅是方便调试
					password: "123456",
				},
			};
		},

		mounted() {
			//初始赋值 ，从本地存储中获取用户名
			if (userStore.theUser)
				this.loginForm.name = userStore.theUser.name;
		},

		methods: {
			//处理用户登录
			onClickLogin() {
				if (this.loginForm.name === "" || this.loginForm.password === "") {
					showToast("账号或密码不能为空");
					return;
				}

				let params = this.loginForm;
				loginAPI(params).then(result => {
					showToast({ message: "登录成功！", duration: 1000 });
					//本地保存用户信息（id,name）保存Token 调用utils/auth.js模块功能
					userStore.setToken(result.data.token);
					userStore.setUser(result.data.user);

					//登录成功后跳转到需要重定向的路径，默认是我的页面（user）
					let toPath = this.$route.params.redirect || "user";
					setTimeout(() => {
						this.$router.replace({
							path: toPath
						});
					}, 1000);
				});
			},

			// 处理用户注册
			onRegister() {
				//路由跳转到用户注册页面
				this.$router.push({ name: "register" });
			},
		},
	};
</script>

<style lang="less" scoped>
	.goto {
		display: block;
		margin-top: 25px;
		text-align: center;
	}
</style>